import React, {useState} from 'react';
import {usePoetry} from "./ poetry-hooks";
import {StyledInput, StyledXing} from "./poetry-text/word-style";
import styled from "styled-components";

const StyledWritingBox = styled(StyledXing)`
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
`;

const StyledChinese = styled(StyledXing)`
color: green;
margin-right: 6px;
`;

const StyledButton = styled.button`
margin-left: 3px;
width: 100px;
padding: 5px 10px;
`;

export function WriteBox() {
    const {question} = usePoetry();
    const [className, setClassName] = useState('');
    const onChange = e => {
        let intentSuccess = 'bp3-intent-success';
        if (e.target.value.replace(/\s/, '') === question.rawYin) {
            setClassName(intentSuccess);
        } else {
            if(className === intentSuccess) {
                setClassName('')
            }
        }
    };

    return (
        <StyledWritingBox>
            <StyledChinese>{question.xing}</StyledChinese>
            <StyledInput className={className} placeholder="请输入拼音..." onChange={onChange} maxLength={8} />
            <StyledButton>提交</StyledButton>
        </StyledWritingBox>
    )
}
